<!--
 * @Author: your name
 * @Date: 2021-08-25 13:33:48
 * @LastEditTime: 2021-09-02 22:21:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\link.vue
-->
<template>
    <div class="items" @click="NavtargetTo(url)">
        <span>
            <svg-icon :icon-class="urldata.icon" size="1.1"></svg-icon>
        </span>
        <span :class="[isShow ? '' : 'active']">{{
            keyFun(urldata.mate.title)
        }}</span>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import i18n from '../setting/locales/setlocales'
import { SetLocalStrong } from '../ntils/hooks'

const { t } = i18n.global
const props = {
    urldata: {
        type: [Object],
    },
    url: {
        type: String,
    },
    isShow: {
        type: [String, Boolean],
    },
}
export default defineComponent({
    name: 'Links',
    props,
    setup() {
        let router = useRouter()
        // 路由跳转
        function NavtargetTo(url) {
            SetLocalStrong({ key: 'APP_ROUTER', value: url })
            router.push(url)
        }
        // 国际化
        const keyFun = (key) => t(key)
        return {
            NavtargetTo,
            keyFun,
        }
    },
})
</script>

<style lang="less" scoped>
.items {
  display: flex;
  align-items: center;
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    &:nth-of-type(2) {
      margin-left: 35px;
      display: flex;
      align-items: center;
      opacity: 1;
      transition: all 0.2s ease-in 0s;
      &.active {
        margin-left: 10px;
        opacity: 1;
      }
    }
  }
}
</style>
